<template>
  <div class="product-detail-container">
    <el-skeleton :loading="loading" animated :rows="10">
      <div v-if="!loading" class="detail-card">
        <!-- 头部区域 -->
        <div class="header-section">
          <!-- 封面图片区域 -->
          <div class="cover-section">
            <el-image
              :src="productDetail.coverImage"
              :alt="productDetail.name"
              class="cover-image"
              fit="cover"
            >
              <template #error>
                <div class="image-error">
                  <i class="el-icon-picture-outline"></i>
                  <p>图片加载失败</p>
                </div>
              </template>
            </el-image>
          </div>

          <!-- 信息区域 -->
          <div class="info-section">
            <h1 class="product-title">{{ productDetail.name }}</h1>

            <div class="meta-info">
              <div class="meta-item">
                <span class="label">分类：</span>
                <span class="value">{{ productDetail.categoryName || '非遗文创' }}</span>
              </div>
              <div class="meta-item">
                <span class="label">发布时间：</span>
                <span class="value">{{ formatDate(productDetail.createTime) }}</span>
              </div>
              <div class="meta-item">
                <span class="label">浏览量：</span>
                <span class="value">{{ productDetail.views || 0 }}次</span>
              </div>
            </div>

            <div class="price-section">
              <div class="current-price">¥{{ productDetail.price }}</div>
              <div class="original-price" v-if="productDetail.originalPrice">
                ¥{{ productDetail.originalPrice }}
              </div>
            </div>

            <div class="action-section">
              <el-button type="primary" @click="handleAddToCart" size="large">
                <i class="el-icon-shopping-cart"></i>
                加入购物车
              </el-button>
            </div>
          </div>
        </div>

        <!-- Tabs区域 -->
        <div class="tabs-section">
          <el-tabs v-model="activeTab">
            <el-tab-pane label="商品详情" name="detail">
              <div class="content-section">
                <div class="content-text" v-html="productDetail.description || productDetail.intro || '暂无详情'"></div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </el-skeleton>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElSkeleton, ElImage, ElTabs, ElTabPane, ElButton } from 'element-plus'
import useCartStore from '../../stores/cartStore'

const route = useRoute()
const router = useRouter()
const cartStore = useCartStore()

// 数据状态
const loading = ref(true)
const productDetail = ref({})
const activeTab = ref('detail')

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return '未知时间'
  const date = new Date(dateString)
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
}

// 获取商品详情
const getProductDetail = async () => {
  try {
    loading.value = true
    
    // 模拟API延迟
    await new Promise(resolve => setTimeout(resolve, 500))
    
    // 使用虚假数据替代真实API调用
    const productId = route.query.id || 1
    
    // 模拟商品数据
    const mockProducts = [
      {
        id: 1,
        name: '手工刺绣旗袍',
        price: 899.00,
        originalPrice: 1299.00,
        coverImage: '/public/images/手工刺绣旗袍.jpg',
        categoryName: '传统服饰',
        description: '<p>精美手工刺绣旗袍，展现东方女性之美。</p><p>采用优质丝绸面料，手工精细刺绣，每一个细节都体现了传统工艺的精湛技艺。</p><p>适合重要场合穿着，彰显您的优雅气质。</p>',
        createTime: '2023-05-15T10:30:00Z',
        views: 128
      },
      {
        id: 2,
        name: '景泰蓝花瓶',
        price: 599.00,
        originalPrice: 799.00,
        coverImage: '/public/images/景泰蓝花瓶.jpg',
        categoryName: '手工艺品',
        description: '<p>传统景泰蓝工艺制作，色彩艳丽。</p><p>采用铜胎掐丝珐琅工艺，经过多道复杂工序精心制作而成。</p><p>具有很高的艺术价值和收藏价值。</p>',
        createTime: '2023-06-20T14:45:00Z',
        views: 96
      },
      {
        id: 3,
        name: '紫砂茶具套装',
        price: 1299.00,
        originalPrice: 1599.00,
        coverImage: '/public/images/紫砂茶具套装.jpg',
        categoryName: '文化用品',
        description: '<p>宜兴紫砂工艺，泡茶更香醇。</p><p>选用优质紫砂泥料，纯手工制作，具有良好的透气性和保温性。</p><p>长期使用能改善水质，使茶汤更加醇厚。</p>',
        createTime: '2023-07-10T09:15:00Z',
        views: 215
      },
      {
        id: 4,
        name: '木雕屏风',
        price: 1599.00,
        originalPrice: 1999.00,
        coverImage: '/public/images/木雕屏风.jpg',
        categoryName: '手工艺品',
        description: '<p>精工木雕屏风，古典雅致。</p><p>选用优质楠木材料，经过数月雕刻而成，展现了精湛的传统木雕工艺。</p><p>适用于客厅、书房等场所，既实用又具有很高的艺术欣赏价值。</p>',
        createTime: '2023-08-05T16:20:00Z',
        views: 78
      },
      {
        id: 5,
        name: '青花瓷',
        price: 1999.00,
        originalPrice: 2599.00,
        coverImage: '/public/images/青花瓷.jpg',
        categoryName: '艺术收藏',
        description: '<p>珍贵青花瓷器收藏册，极具收藏价值。</p><p>采用传统青花瓷工艺，图案精美，色泽清雅，具有很高的艺术价值和收藏价值。</p><p>每一件都是独一无二的艺术珍品，值得收藏和传承。</p>',
        createTime: '2023-09-12T11:45:00Z',
        views: 205
      },
      {
        id: 6,
        name: '苏绣团扇',
        price: 299.00,
        originalPrice: 399.00,
        coverImage: '/public/images/苏绣团扇.jpg',
        categoryName: '传统服饰',
        description: '<p>苏州刺绣工艺团扇，精致典雅。</p><p>采用苏州传统刺绣工艺，手工精细，图案栩栩如生。</p><p>既是实用的纳凉工具，也是精美的艺术品，适合收藏或送礼。</p>',
        createTime: '2023-10-18T14:30:00Z',
        views: 92
      },
      {
        id: 7,
        name: '陶瓷茶杯套装',
        price: 199.00,
        originalPrice: 299.00,
        coverImage: '/public/images/陶瓷茶杯套装.jpg',
        categoryName: '文化用品',
        description: '<p>景德镇陶瓷工艺，手感温润。</p><p>选用景德镇优质陶瓷材料，经过高温烧制而成，质地细腻，手感温润。</p><p>适合日常使用，也能体现主人的品味。</p>',
        createTime: '2023-11-03T09:15:00Z',
        views: 143
      },
      {
        id: 8,
        name: '竹编收纳篮',
        price: 159.00,
        originalPrice: 199.00,
        coverImage: '/public/images/竹编收纳篮.jpg',
        categoryName: '手工艺品',
        description: '<p>天然竹编工艺，环保实用。</p><p>选用优质竹材，采用传统竹编工艺手工编制而成，环保健康。</p><p>既实用又美观，适合现代家居使用。</p>',
        createTime: '2023-11-20T13:40:00Z',
        views: 67
      }
    ]
    
    const product = mockProducts.find(p => p.id == productId) || mockProducts[0]
    productDetail.value = product
  } catch (error) {
    console.error('获取商品详情失败:', error)
    ElMessage.error('获取商品详情失败')
  } finally {
    loading.value = false
  }
}

// 添加到购物车
const handleAddToCart = () => {
  try {
    cartStore.addToCart(productDetail.value)
    ElMessage.success('已添加到购物车')
  } catch (error) {
    console.error('添加到购物车失败:', error)
    ElMessage.error('添加到购物车失败')
  }
}

// 页面初始化
onMounted(() => {
  getProductDetail()
})
</script>

<style lang="scss" scoped>
.product-detail-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 65px - 34px - 32px);

  .detail-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 30px;

    // 头部区域
    .header-section {
      display: flex;
      gap: 30px;
      padding: 30px;
      border-bottom: 1px solid #eee;

      @media (max-width: 768px) {
        flex-direction: column;
        gap: 20px;
        padding: 20px;
      }

      // 封面图片区域
      .cover-section {
        flex: 0 0 400px;

        @media (max-width: 768px) {
          flex: none;
          width: 100%;
        }

        .cover-image {
          width: 100%;
          height: 400px;
          border-radius: 12px;
          overflow: hidden;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

          @media (max-width: 768px) {
            height: 300px;
          }
        }

        .image-error {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 400px;
          background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
          color: #bdc3c7;
          border-radius: 12px;

          @media (max-width: 768px) {
            height: 300px;
          }

          i {
            font-size: 48px;
            margin-bottom: 10px;
          }

          p {
            font-size: 16px;
          }
        }
      }

      // 信息区域
      .info-section {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 20px;

        .product-title {
          font-size: 28px;
          font-weight: 700;
          color: #2c3e50;
          margin: 0;
          line-height: 1.3;

          @media (max-width: 768px) {
            font-size: 24px;
          }
        }

        .meta-info {
          display: flex;
          flex-wrap: wrap;
          gap: 15px;

          .meta-item {
            display: flex;
            align-items: center;
            gap: 8px;

            .label {
              font-size: 14px;
              color: #7f8c8d;
              font-weight: 500;
            }

            .value {
              font-size: 14px;
              color: #2c3e50;
              font-weight: 400;
            }
          }
        }

        .price-section {
          display: flex;
          align-items: center;
          gap: 15px;
          margin-top: 10px;

          .current-price {
            font-size: 32px;
            font-weight: 700;
            color: #e74c3c;
          }

          .original-price {
            font-size: 18px;
            color: #95a5a6;
            text-decoration: line-through;
          }
        }

        .action-section {
          margin-top: auto;

          .el-button {
            padding: 16px 32px;
            font-size: 16px;
            border-radius: 12px;
          }
        }
      }
    }

    // Tabs区域
    .tabs-section {
      .content-section {
        padding: 30px;

        @media (max-width: 768px) {
          padding: 20px;
        }

        .content-text {
          font-size: 16px;
          line-height: 1.8;
          color: #333;
          text-align: justify;

          :deep(img) {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            margin: 15px 0;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          }

          :deep(p) {
            margin-bottom: 15px;
          }

          :deep(h1, h2, h3, h4, h5, h6) {
            margin: 25px 0 15px 0;
            color: #2c3e50;
          }
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .product-detail-container {
    padding: 10px;

    .detail-card {
      .header-section {
        flex-direction: column;
        gap: 20px;

        .cover-section {
          flex: none;

          .cover-image,
          .image-error {
            height: 250px;
          }
        }

        .info-section {
          .product-title {
            font-size: 22px;
          }

          .meta-info {
            .meta-item {
              flex-direction: column;
              align-items: flex-start;
              gap: 5px;
            }
          }

          .price-section {
            .current-price {
              font-size: 28px;
            }

            .original-price {
              font-size: 16px;
            }
          }
        }
      }
    }
  }
}
</style>